{include file="common:theader" /}
{include file="common:tside" /}
<!-- 引入样式 -->
    <div id="page-wrapper">
      <!-- 舆情日报 -->
      <!--*************************** content部分开始 ******************-->
      <div class="container-fluid" id="m_main">
        <div class="row m-t-20">
          <div class="col-sm-12">
            <div class="white-box">
              <h2 class="box-title m-b-20">课件管理</h2>
              <div class="row">
                <div class="col-sm-4">
                  <div class="form-group">
                    <label class="control-label">课件名称：</label>
                    <input type="text" class="form-control" placeholder="" v-model="name">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-4">
                  <div class="form-group">
                    <label class="control-label">所属课程大板块：</label>
                  </div>
                </div>
                <div class="col-sm-4">
                  <div class="form-group">
                    <label class="control-label">所属课程体系：</label>
                  </div>
                </div>
                <div class="col-sm-4">
                  <div class="form-group">
                    <label class="control-label">所属课程主题：</label>
                  </div>
                </div>
                <div class="col-sm-4">
                  <div class="form-group">
                    <select class="selectpicker" data-style="form-control" v-model="pid1" @change="getSons()">
                      <option value="">请选择</option>
                      {foreach $courseware_course as $key=>$vo } 
                      <option value="{$vo.id}">{$vo.name}</option>
                      {/foreach}
                    </select>
                  </div>
                </div>
                <div id="pid2-box" class="col-sm-4">
                  <div class="form-group">
                    <select id="pid2" class="selectpicker" data-style="form-control" v-model="pid2" @change="getSons2()">
                      <option value="">请选择</option>
                      <option v-for="item in course2" :value="item.id">{{item.name}}</option>
                    </select>
                  </div>
                </div>
                <div id="pid3-box" class="col-sm-4">
                  <div class="form-group">
                    <select id="pid3" class="selectpicker" data-style="form-control" v-model="pid3" @change="getSons2()">
                      <option value="">请选择</option>
                      <option v-for="item in course3" :value="item.id">{{item.name}}</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-8">
                  <div class="form-group">
                    <label class="control-label">主要知识点：</label>
                    <textarea class="form-control" placeholder="请输入..." v-model="main_point">{{main_point}}</textarea>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-8">
                  <div class="form-group">
                    <label class="control-label">教学目标：</label>
                    <textarea class="form-control" placeholder="请输入..." v-model="teaching_aims">{{teaching_aims}}</textarea>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-4">
                  <div class="form-group">
                    <label class="control-label">是否允许下载：</label>
                    <select class="selectpicker" data-style="form-control" v-model="can_download">
                      <option value="0">否</option>
                      <option value="1">是</option>
                    </select>
                  </div>
                </div>
              </div>
              <div id="kejian">
                <div class="row classtime">
                  <div class="col-sm-4">
                    <div class="form-group">
                      <label class="control-label">课件类型：</label>
                      <select class="selectpicker week" data-style="form-control" id="type">
                        <option value="">请选择</option>
                        {foreach $courseware_type as $key=>$vo } 
                        <option value="{$vo.id}">{$vo.name}</option>
                        {/foreach}
                      </select>
                    </div>
                  </div>
                  <div class="col-sm-7">
                    <div class="form-group m-addsku-pics">
                      <label class="control-label">上传课件：</label>
                      <div>
                        <label for="add_teacher_info_pic0" class="btn btn-primary waves-effect waves-light" style="line-height: 20px;padding: 6px 10px">添加文件</label>
                        <input type="file" id="add_teacher_info_pic0" name="file" class="addpics" data-amount="1"/>
                        <div class="col-md-12">
                          <div id="teacher_info_pic_box" class="pic-box"></div>
                          <input type="hidden" name="teacher_info_pic" class="add-pic" id="teacher_info_pic" value="" data-id="">
                          <input type="hidden" name="delete_teacher_info_pic" class="delete-pic" id="delete_teacher_info_pic">
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-1">
                    <button @click="addclasstime()" id="add" class="btn btn-outline btn-primary" style="padding: 9px 20px;">增加</button>
                  </div>
                </div>
              </div>
              <div class="row m-t-40">
                <div class="col-sm-8 ta-c">
                  <button type="button" name="" class="btn btn-outline btn-primary m-r-40" @click="doSubmit()">提交</button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- /.row -->
      </div>
      <!--*************************** content部分结束 ******************-->

      <!-- <footer class="footer text-center"> 2017 &copy; Ample Admin brought to you by themedesigner.in </footer> -->
    </div>
  {include file="common:js" /}
  {include file="common:footer" /}
  <script src="/assets/plugins/bower_components/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
  <script src="/assets/plugins/bower_components/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
  <script src="/assets/plugins/bower_components/jQuery-File-Upload/js/jquery.fileupload.js"></script>
  <script src="/web/js/edit.js"></script>
  <script>
    $(function() {
      upload_photo('#add_teacher_info_pic0','/dboard/upload/avatar_upload');
    });
    function delclasstime(e) {
      $(e).parents('.classtime').remove();
    }
  </script>

  <script type="text/javascript">
    var vm = new Vue({
      el: '#m_main',
      data() {
        return {
          sid: "",
          name: "",
          type: "",
          course: "",
          pid1: 0,      //所属课程第一级的值
          pid2: 0,      //所属课程第二级的值
          pid3: 0,      //所属课程第三级的值
          course2: {},      //所属课程第二级的选项
          course3: {},      //所属课程第三级的选项
          main_point: "",
          teaching_aims: "",
          can_download:0,
        }
      },
      mounted() {
      },
      methods: {
        requestData() {
          let that = this;
          axios.post('/dboard/acourseware/info', {sid: this.sid},{headers: {'X-Requested-with':'XMLHttpRequest'}}).then(res => {
            // console.log(res);
            if(res.data.Code == 0){
              console.log(res.data.Data.store)
              that.name = res.data.Data.store.name;
              that.course = res.data.Data.store.course;
              that.type = res.data.Data.store.type;
            }else{
              alert(res.data.Msg)
            }
          }).catch(err => {
            console.log(err);
          })
        },
        // 提交
        doSubmit(){
          var that = this;
          var param = {
            name: that.name,
            course: that.pid3,
            main_point: that.main_point,
            teaching_aims: that.teaching_aims,
            can_download: that.can_download,
          }
          param.sid = that.sid;
          // var coursewareStr = $('#teacher_info_pic').val();
          // param.file = coursewareStr;
          var coursewareStr = [];
          var kejian = $('#kejian .classtime');
          $('#kejian .classtime').each(function (i,j) {
            typename = $(j).find('.week').val()
            filename = $(j).find('.add-pic').val()
            coursewareStr.push([typename,filename])
          })
          param.file = coursewareStr;
          that.api = "/dboard/acourseware/doCreateCourseware";
          console.log(param)
          axios.post(that.api, param,{headers: {'X-Requested-with':'XMLHttpRequest'}}).then(res => {
            // console.log(res);
            if(res.data.Code == 0){
              //请求成功
              alert(res.data.Msg);
              window.location.href = '/dboard/Acourseware/coursewareLists';
            }else{
              alert(res.data.Msg)
            }
          }).catch(err => {
            console.log(err);
          })
        },
        getSons(){
          var param = {
            pid: this.pid1,
          }
          axios.post('/dboard/acourseware/courseware_course_son', param,{headers: {'X-Requested-with':'XMLHttpRequest'}}).then(res => {
            // console.log(res);
            if(res.data.Code == 0){
              if (res.data.Data) {
                this.course2 = res.data.Data;
                $('#pid2-box').show();
                setTimeout(()=>{
                  $('#pid2').selectpicker('refresh'); 
                },500); 
              }
            }
          }).catch(err => {
            console.log(err);
          })
        },
        getSons2(){
          var param = {
            pid: this.pid2,
          }
          axios.post('/dboard/acourseware/courseware_course_son', param,{headers: {'X-Requested-with':'XMLHttpRequest'}}).then(res => {
            // console.log(res);
            if(res.data.Code == 0){
              if (res.data.Data) {
                this.course3 = res.data.Data;
                $('#pid3-box').show();
                setTimeout(()=>{
                  $('#pid3').selectpicker('refresh'); 
                },500); 
              }
            }
          }).catch(err => {
            console.log(err);
          })
        },
        addclasstime(){
          var node_num = $('#kejian').children('.classtime').length;
          var opetion_html = $('#type').html();
          var html = `<div class="row classtime">
                  <div class="col-sm-4">
                    <div class="form-group">
                      <label class="control-label">课件类型：</label>
                      <select class="selectpicker week" data-style="form-control" id="type">`
                        +opetion_html+
                      `</select>
                    </div>
                  </div>
                  <div class="col-sm-7">
                    <div class="form-group m-addsku-pics">
                      <label class="control-label">上传课件：</label>
                      <div>
                        <label for="add_teacher_info_pic`+node_num+`" class="btn btn-primary waves-effect waves-light" style="line-height: 20px;padding: 6px 10px">添加文件</label>
                        <input type="file" id="add_teacher_info_pic`+node_num+`" name="file" class="addpics" data-amount="1"/>
                        <div class="col-md-12">
                          <div id="teacher_info_pic_box" class="pic-box"></div>
                          <input type="hidden" name="teacher_info_pic" class="add-pic" id="teacher_info_pic" value="" data-id="">
                          <input type="hidden" name="delete_teacher_info_pic" class="delete-pic" id="delete_teacher_info_pic">
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-1">
                    <button onClick="delclasstime(this)" class="del btn btn-outline btn-primary btn-danger" style="padding: 9px 20px;">删除</button>
                  </div>
                </div>
          `
          $('#kejian').append(html);
          $('.week').selectpicker('refresh');
          upload_photo('#add_teacher_info_pic'+node_num,'/dboard/upload/avatar_upload');
        }
      }
    })
  </script>
